<template>
  <el-card class="card" ref="card">
    <div ref="div">
      <el-form ref="form">
        <el-row :gutter="24">
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="字典名称">
              <el-select v-model="formData.dict_id">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="字典标签">
              <el-input v-model="formData.dict_value_label"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="字典状态">
              <el-select v-model="formData.status">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="正常" :value="1"></el-option>
                <el-option label="停用" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="mg-8" :gutter="24">
        <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-loading="loading">
      <el-scrollbar>
        <el-table border :height="height" stripe :data="tableData">
          <el-table-column prop="id" label="字典编码" align="center"/>
          <el-table-column prop="dict_code" label="字典类型" align="center"/>
          <el-table-column prop="dict_value_value" label="字典键值" align="center"/>
          <el-table-column prop="dict_value_label" label="字典标签" align="center">
            <template #default="{row: {dict_value_label, dict_value_type}}">
              <el-tag :type="dict_value_type">{{dict_value_label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center"/>
          <el-table-column prop="sort" label="排序" align="center"/>
          <el-table-column prop="status" label="字典状态" align="center">
            <template #default="{row: {status}}">
              <el-tag v-show="status === 1" type="success">正常</el-tag>
              <el-tag v-show="status === 0" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template #default="{ row }">
              <el-button type="primary" @click="handleEdit(row)">修改</el-button>
              <el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <Pagination
          :total="pagination.total"
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          @change="handlePaginationChange"
      />
    </div>
    <DictValueModel ref="model" @list="getList"></DictValueModel>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "DictValue"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import {useCardHeight} from '@/hooks/useCardHeight'
import {usePagination} from '@/hooks/usePagination'
import {useRoute} from 'vue-router'
import {dictAllList, dictValueDelete, dictValueList} from '@/api/system.dict'
import {systemDictAllListType} from '@/type/system.dict'
import DictValueModel from '@/pages/system/dictValue/component/DictValueModel.vue'
import { systemDictValueListItemType, systemDictValueListQueryType} from '@/type/system.dictValue'
import {ElMessageBox} from 'element-plus'

const route = useRoute()

const options = ref<systemDictAllListType[]>([])

const model = ref<{
  init: (code: string) => void
  edit: (row: systemDictValueListItemType) => void
}>()

const { card, height, form, div } = useCardHeight()

const { Pagination, setPagination, pagination } = usePagination()

const code = ref<string>('')

const formData = reactive<systemDictValueListQueryType>({
  dict_id: Number(route.query.id),
  status: -1,
  dict_value_label: ""
})

const loading = ref<boolean>(false)

const tableData = ref<systemDictValueListItemType[]>([])

const getList = () => {
  loading.value = true
  dictValueList({
    current: pagination.current,
    pageSize: pagination.pageSize,
    data: {
      dict_id: formData.dict_id,
      status: formData.status,
      dict_value_label: formData.dict_value_label
    }
  }).then(res =>{
    if (res.code === 200) {
      setPagination(res.data.total, res.data.current, res.data.pageSize)
      tableData.value = res.data.list
    }
  }).finally(() => {
    loading.value = false
  })
}

const dictValueAllList = () => {
  dictAllList().then(res => {
    if (res.code === 200) {
      options.value = res.data
      code.value = res.data[0].text
      getList()
    }
  })
}

const handleSearch = () => {
  setPagination(pagination.total, 1, 10)
  getList()
}

const handleReset = () => {
  setPagination(pagination.total, 1, 10)
  formData.status = -1
  formData.dict_value_label = ""
  formData.dict_id = Number(route.query.id)
  getList()
}

const handleAdd = () => {
  model.value?.init(code.value)
}

const handleEdit = (row: systemDictValueListItemType) => {
  model.value?.edit(row)
  // console.log(row)
}

const handleDelete = (id: number) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    dictValueDelete({id}).then(res => {

    })
  })
  // dictValueDelete
}

const handlePaginationChange = () => {
  getList()
}

onMounted( () => {
  dictValueAllList()
} )
</script>

<style scoped lang="scss">

</style>
